<template>
  <div class="search-display-background">
    <div class="search-display">
      <img
        class="search-display-cover-image"
        :src="novel.coverImage"
        alt="小说封面"
        @click="novelDetail(novel.id)"
      />
      <div class="search-novel-info">
        <div class="search-novel-info-title" @click="novelDetail(novel.id)">{{ novel.title }}</div>
        <div class="search-novel-info-author">作者：{{ novel.author }}</div>
        <div class="search-novel-info-kind">{{ novel.novelKindName }}</div>
        <div class="search-novel-info-point">.</div>
        <div class="search-novel-info-isEnd" v-if="novel.isEnd">已完结</div>
        <div class="search-novel-info-isEnd" v-else>连载中</div>
        <div class="search-novel-info-views">{{ novel.views }}人阅读</div>
        <div class="search-novel-info-description">
          <el-text line-clamp="3">
            {{ novel.description }}
          </el-text>
        </div>
        <div class="search-novel-info-update">最近更新：第{{novel.lastChapterNum}}章 {{novel.lastChapterTitle}}></div>
        <div class="search-novel-info-update-time">{{novel.lastChapterUpdateTime}}</div>
      </div>
      <div>
        <el-button type="warning" round @click="readingBook">立即阅读</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchDisplayComponent",
  props: {
    novel: Object,
  },
  data() {
    return {};
  },
  methods: {
    readingBook() {
      this.$router.push({
        name: "novelReading",
        params: { novelId: this.novel.id, chapterId: this.novel.firstChapterId },
      });
    },
    novelDetail(id) {
      this.$router.push({ name: "novelDetail", params: { id: id } });
    },
  },
};
</script>

<style>
.search-display-background {
  background-color: rgb(239 239 239);
}
.search-display {
  display: flex;
  align-items: center;
  width: 1200px;
  height: 250px;
  margin: 0px 150px;
  background-color: white;
}
.search-display-cover-image {
  position: relative;
  left: 20px;
  max-width: 150px;
  max-height: 200px;
  border-radius: 10px;
  margin-right: 20px;
}
.search-novel-info {
  display: flex;
  position: relative;
  left: 30px;
  flex-direction: column;
  justify-content: space-between;
}
.search-novel-info-title {
  position: relative;
  top: 10px;
  font-size: 20px;
}
.search-novel-info-author {
  position: relative;
  top: 15px;
  font-size: 14px;
  overflow-x: hidden;
  color: rgba(0, 0, 0, 0.4);
}
.search-novel-info-kind {
  position: relative;
  top: -5px;
  left: 150px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
.search-novel-info-point {
  position: relative;
  top: -30px;
  left: 190px;
  color: rgba(0, 0, 0, 0.4);
}
.search-novel-info-isEnd {
  position: relative;
  top: -45px;
  left: 200px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
.search-novel-info-views {
  position: relative;
  top: -65px;
  left: 330px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
.search-novel-info-description {
  position: relative;
  top: -40px;
  width: 800px;
  height: 50px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
.search-novel-info-update {
  position: relative;
  color: rgba(0, 0, 0, 0.4);
}
.search-novel-info-update-time {
  position: relative;
  top: -20px;
  left: 300px;
  color: rgba(0, 0, 0, 0.4);
}
</style>